<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>个人资料</title>
</head>

<body>
    <form action="" method="post" target="help">
        <br>
        <div class="layui-form-item">
            <label class="layui-form-label">昵称：</label>
            <div class="layui-input-block">
                <input style="width: 300px" type="text" name="display_name" id="display_name" required  lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">生日：</label>
                <div class="layui-input-inline" style="margin-left: 30px;">
                    <input style="width: 300px" type="text" class="layui-input" id="birthday" name="birthday" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮箱：</label>
            <div class="layui-input-block">
                <input style="width: 300px" type="text" id="email" name="email" lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>

        <input type="hidden" id="location" name="location" class="image">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 90px;height: 38px;">所在地：</label>
            <div class="layui-input-inline" style="margin-left: 20px;">
                <select id="city" name="city" class="form-control">
                    <option value="">请选择省</option>
                    <option value="浙江省" >浙江省</option>
                    <option value="江西省">江西省</option>
                    <option value="福建省">福建省</option>
                    <option value="广东省">广东省</option>
                    <option value="陕西省">陕西省</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="margin-top: -7px;">性别：</label>
            <div class="layui-input-block">
                男:<input type="radio" name="sex" id="sex1" value="男" title="男">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                女:<input type="radio" name="sex" id="sex0" value="女" title="女" checked>
            </div>
        </div>
        <!--************这里是上传图片的代码***************-->
        <!--************这里添加的隐藏的输入框，用来传递images的参数***************-->
        <input type="hidden"  id="imageUrl" name="imageUrl" class="image">
        <div class="layui-form-item">
            <label class="layui-form-label ">头像:</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="image_btn" style="position: absolute;left: 100px;">上传头像</button>
                <div class="layui-upload-list">
                    <img style="margin-left: 20px; margin-top: 50px; width: 90px; height: 90px" id="show_image">
                    <p id="imageMsg"></p>
                </div>
            </div>
        </div>
        <!--************上面里是上传图片的代码***************-->

        <br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button style="margin-left: -10px;" id="update_btn" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit="" lay-filter="update-info-btn">修改</button>
                <button style="margin-left: 60px;" type="reset" class="layui-btn layui-btn-radius  layui-btn-danger">重置</button>
            </div>
        </div>
        <br>

    </form>

    <iframe frameborder="0" id="help" name="help" hidden></iframe>

    <script src="/layui/layui.js" charset="utf-8"></script>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="/js/information.js"></script>
    <script>
        layui.use(['laydate','upload','form','jquery'], function(){
            var $ = layui.jquery,
                upload = layui.upload,
                laydate = layui.laydate,
                form = layui.form;

            //执行一个laydate实例
            laydate.render({
                elem: '#birthday' //指定元素
            });

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#image_btn'
                ,url: "/information/upload"
                ,accept:'images'
                ,size:50000
                ,before: function(obj){

                    obj.preview(function(index, file, result){
                        $('#show_image').attr('src', result);
                    });
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code > 0){
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    var imageMsg = $('#imageMsg');
                    imageMsg.html('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #4cae4c;">上传成功</span>');

                    var fileupload = $("#imageUrl");
                    fileupload.attr("value",res.data.src);
                    console.log(fileupload.attr("value"));
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var imageMsg = $('#imageMsg');
                    imageMsg.html('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    imageMsg.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });

            form.on('submit(update-info-btn)',function (data){
                 data = {
                    "display_name": $("#display_name").val(),
                    "birthday": $("#birthday").val(),
                    "email": $("#email").val(),
                    "location": $("#city").val(),
                    "sex": $("input[name='sex']:checked").val(),
                    "imageUrl": $("#imageUrl").val()
                }
                console.log(data);
                $.ajax({
                    url: "/information/updateInfo",
                    type:'post',
                    data: data,
                    success: function (res){
                        if(res.code===200){
                            layer.msg(res.msg, {
                                icon: 1,
                                anim: 1,
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            }, function(){
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });
                        }else{
                            layer.msg(res.msg, {
                                icon: 2,
                                anim: 6,
                                time: 2000
                            });
                        }
                    }
                });
                return false;
            })
        });
    </script>
</body>
</html>